<template>
  <!-- 工作台相关 -->
  <div class="go-chart">
    <n-layout>
      <layout-header-pro>
        <template #left>
          <header-left-btn></header-left-btn>
        </template>
        <template #center>
          <header-title></header-title>
        </template>
        <template #ri-left>
          <header-right-btn></header-right-btn>
        </template>
      </layout-header-pro>
      <n-layout-content content-style="overflow:hidden; display: flex">
        <div style="overflow: hidden; display: flex">
          <content-charts></content-charts>
          <content-layers></content-layers>
        </div>
        <content-configurations></content-configurations>
      </n-layout-content>
    </n-layout>
  </div>
  <!-- 右键 -->
  <n-dropdown
    placement="bottom-start"
    trigger="manual"
    size="small"
    :x="mousePosition.x"
    :y="mousePosition.y"
    :options="menuOptions"
    :show="chartEditStore.getRightMenuShow"
    :on-clickoutside="onClickOutSide"
    @select="newHandleMenuSelect"
  ></n-dropdown>
  <!-- 加载蒙层 -->
  <content-load></content-load>
</template>

<script setup lang="ts">
import { loadAsyncComponent,loadingFinish } from '@/utils'
import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
import { useContextMenu } from './hooks/useContextMenu.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
import cloneDeep from 'lodash/cloneDeep'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'

const chartHistoryStoreStore = useChartHistoryStore()
const chartEditStore = useChartEditStore()

// 记录初始化
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)

const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/index.vue'))
const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/index.vue'))
const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))

// 右键
const { menuOptions, onClickOutSide, mousePosition, handleMenuSelect } = useContextMenu()

const newHandleMenuSelect = (key: string) => {
  //拦截 要删除三维场景时，先提示把其他三维场景相关的组件进行删除
  //  console.log("chartEditStore",chartEditStore.getTargetChart);
  if (key === 'delete') {
    _diagnosisDeleteSSmapGoble(key)
  } else {
    handleMenuSelect(key)
  }
}
/**
 * * 判断是否 删除三维球体 组件
 * @param operateKey String 右键操作索引命名;
 */
const _diagnosisDeleteSSmapGoble = (operateKey:string) => {
  let idArr: any = chartEditStore.getTargetChart
  idArr.selectId.forEach((ids: any) => {
    const index = chartEditStore.fetchTargetIndex(ids)
    if (index !== -1) {
      let component = chartEditStore.getComponentList[index]
      if (!component) return
      let { key } = component
      if (key === 'SSMapGlobe') {
        window['$dialog'].warning({
          title: '删除警告',
          content: '你确定删除三维场景？确认后，将会删除三维场景以及相关的组件！！',
          positiveText: '确定',
          negativeText: '不确定',
          onPositiveClick: () => {
            window['$message'].success('确定删除')
            //移除三维场景的相关组件
            _deleteAllSSmapEntities()
            handleMenuSelect(operateKey)
          },
          onNegativeClick: () => {
            // window['$message'].warning('不确定')
          }
        })
      } else {
        handleMenuSelect(operateKey)
      }
    }
  })
}

const _deleteAllSSmapEntities = () => {
  if (window.SSmap) {
    debugger
     const history: Array<CreateComponentType | CreateComponentGroupType> = []
    let componentList = cloneDeep(chartEditStore.getComponentList)
    for(let key in componentList){
      let component = componentList[key]
      let { package: pkg } = component.chartConfig
      if (pkg.includes('SSMap')) {
        history.push(component)
        // 删除三维场景相关的组件
        const index = chartEditStore.fetchTargetIndex(component.id)
        if (index !== -1){
          chartEditStore.componentList.splice(index, 1)
        }
      }
    }
    //删除历史记录
    chartHistoryStoreStore.createDeleteHistory(history)
    loadingFinish()
    window['$message'].success('删除三维场景的其他组件成功！')
  } else {
    window['$message'].warning('没有三维场景！')
  }
}

</script>

<style lang="scss" scoped>
@include go('chart') {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  @include background-image('background-image');
}
</style>
